import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { useSelector } from 'react-redux';
import { getChannelCreator, setActiveIndexCreator } from '../store/action/channel';

export default function Channel() {
  // 1.3 在Channel组件中，获取state，确保能获取到
  // 注意，分模块后使用state.channel获取状态
  const { list, activeIndex } = useSelector((state) => state.channel);

  const dispatch = useDispatch();
  // 3.4 在Channel组件中挂载时，触发请求
  useEffect(() => {
    dispatch(getChannelCreator());
    //💥 可以禁用TSLint检查或者传个dispatch
  }, [dispatch]);

  return (
    <ul className="category">
      {list.map((item) => (
        // 3.5 遍历渲染

        <li
          key={item.id}
          // 4.1 使用activeIndex与item.id判断相等，是否有select的类名
          className={item.id === activeIndex ? 'select' : ''}
          // 4.4 li绑定onChange事件，触发setActiveIndex的action
          onClick={() => dispatch(setActiveIndexCreator(item.id))}
        >
          {item.name}
        </li>
      ))}
    </ul>
  );
}
